<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

  <!--1、Head：标题、css-->
  <head>
    <meta charset="UTF-8">
    <title>博客更新</title>
      <link rel="stylesheet" href="../static/css/admin/font.css" th:href="@{/css/admin/font.css}">
      <link rel="stylesheet" href="./static/css/admin/xadmin.css" th:href="@{/css/admin/xadmin.css}">
      <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css" th:href="@{/lib/editormd/css/editormd.min.css}"/>
      <link href="java.ico" rel="shortcut icon" type="image/x-icon"  th:href="@{/images/favicon.png}"/>
  </head>

  <!--2、JS-->
  <div>
      <script src="../static/lib/admin/layui/layui.js" charset="utf-8" th:src="@{/lib/admin/layui/layui.js}"></script>
      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js" th:src="@{/js/admin/jquery.min.js}"></script>
      <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js" th:src="@{/js/admin/axios.min.js}"></script>
      <script src="../../static/lib/editormd/editormd.min.js" th:src="@{/lib/editormd/editormd.min.js}"></script>
  </div>

  <!--3、内容-->
  <body style="background: #FFFFFF">
    <div style="margin: 4em 8em 10em 8em">
        <div class="layui-row layui-col-space15">

          <form id="form" class="layui-form layui-form-pane" action="/after/updBlog" method="post">
            <input type="hidden" name="uid" th:value="${session.user.id}">
            <input type="hidden" name="bid" th:value="${blog.id}">
            <input type="hidden" name="published" id="published">
            <!--1、文章：标题-->
            <div class="layui-form-item">
              <label class="layui-form-label">文章标题</label>
              <div class="layui-input-block">
                <input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input" th:value="${blog.title}" lay-verify="title">
              </div>
            </div>


            <!--2、Markdown博客内容：编辑区域-->
            <div class="layui-form-item">
              <div id="md-content" style="z-index: 1 !important;">
                <textarea name="content" placeholder="博客内容" style="resize:none" th:text="${blog.content}" lay-verify="content"></textarea>
              </div>
            </div>

            <!--3、文章：性质、类型-->
            <div class="layui-form-item">
                <div class="layui-row">
                  <!--1、文章性质-->
                  <div class="layui-col-md1" >
                    <label class="layui-form-label" style="width: 90px">文章来源</label>
                  </div>

                  <div class="layui-col-md5">

                    <select name="flag">
                      <option disabled>请选择</option>
                      <option value="原创" th:selected="${blog.flag == '原创'} ? 'selected'">原创</option>
                      <option value="转载" th:selected="${blog.flag == '转载'} ? 'selected'">转载</option>
                      <option value="翻译" th:selected="${blog.flag == '翻译'} ? 'selected'">翻译</option>
                    </select>
                  </div>


                  <!--2、文章类型-->
                  <div class="layui-col-md1">
                    <label class="layui-form-label" style="width: 90px">文章类型</label>
                  </div>

                  <div class="layui-col-md5">
                    <select name="typeId" lay-verify="required" lay-search="">
                      <option value="">请选择</option>
                      <option  th:each="type : ${types}" th:value="${type.id}" th:text="${type.name}" th:selected="${blog.type.id == type.id} ? 'selected'">JS</option>
                    </select>
                  </div>
                </div>
            </div>

            <!--4、文章标签-->
            <div class="layui-form-item">
              <div class="layui-row">

                <div class="layui-col-md1">
                  <label class="layui-form-label" style="width: 90px; margin: -1px">文章标签</label>
                </div>

                <div class="layui-col-md11" >
                  <div id="demo1" class="xm-select-demo"></div>
                </div>

              </div>
            </div>

            <!--5、文章首图-->
            <div class="layui-form-item">
              <div class="layui-row">
                <div class="layui-col-md1">
                  <label class="layui-form-label" style="width: 90px">文章首图</label>
                </div>

                <div class="layui-col-md11">
                    <input type="url" name="firstPicture" autocomplete="off" placeholder="请输入首图：URL" class="layui-input" th:value="${blog.firstPicture}" lay-verify="required|url">
                </div>
              </div>
            </div>

            <!--博客描述-->
            <div class="layui-form-item layui-form-text">
              <label class="layui-form-label">博客描述</label>
              <div class="layui-input-block">
                <textarea placeholder="请输入内容" name="description" class="layui-textarea" th:text="${blog.description}" lay-verify="description"></textarea>
              </div>
            </div>

            <!--6、复选框-->
            <div class="layui-form-item">
              <label class="layui-form-label" style="margin-top: 3px; width: 90px">选择开启</label>

              <div class="layui-input-block" style="margin-left: 10px">
                <input type="checkbox" name="recommend" title="博客（推荐" th:checked="${blog.recommend} ? 'checked'">
                <input type="checkbox" name="commentabled" title="博客（评论）" th:checked="${blog.commentabled} ? 'checked'">
                <input type="checkbox" name="appreciation" title="博客（赞赏）" th:checked="${blog.appreciation} ? 'checked'">
                <input type="checkbox" name="shareStatement" title="博客（版权）" th:checked="${blog.shareStatement} ? 'checked'">
              </div>
            </div>

            <!--7、返回、发布、提交 （按钮）-->
            <div class="layui-form-item">
              <button class="layui-btn" lay-filter="formDemo" lay-submit>发布</button>
              <button class="layui-btn layui-btn-normal" lay-submit onclick="savaBlog()">草稿</button>
              <button type="button" class="layui-btn layui-btn-warm" onclick="myBack()">返回</button>
            </div>
          </form>

          <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
          <script th:src="@{/lib/admin/xselector/xm-select.js}"></script>



          <script th:inline="javascript">
            var tags = [[${tags}]];
            var demo1 = xmSelect.render({
                el: '#demo1',
                language: 'zn',
                tips: '请选择：文章标签',
                size: 'mini',
                direction: 'down',
                name: 'tags',          //表单提交的名字
                data: []
              });

              //动态标签下拉赋值
              axios({
                method: 'get',
                url: '/after/selTags',
              }).then(response => {
                var res = response.data;
                console.log(res);
                demo1.update({
                  data: res,
                  autoRow: true,
                })

                demo1.setValue(tags);
              });
          </script>
        </div>
    </div>


    <!--1、发布：表单校验-->
    <script type="text/javascript">
      layui.use(['form'], function () {
        var form = layui.form;
        //自定义验证规则
        form.verify({
          title: function (value) {
            if (value.length < 1) {
              return '标题：不能为空！！！';
            }
          },
          content: function (value) {
            if (value.length < 1) {
              return '内容：不能为空！！！';
            }
          },
          description: function (value) {
            if (value.length < 1) {
              return '描述：不能为空！！！';
            }
          },
        });
      });
    </script>

 <script>
      /*用户-删除*/
      function member_del(obj,id){
          layer.confirm('确认要删除吗？',function(index){
              //发异步删除数据
              $(obj).parents("tr").remove();
              layer.msg('已删除!',{icon:1,time:1000});
          });
      }



      function delAll (argument) {

        var data = tableCheck.getData();

        layer.confirm('确认要恢复吗？'+data,function(index){
            //捉到所有被选中的，发异步进行删除
            layer.msg('恢复成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
        });
      }


      var testEditor;
      $(function() {
        testEditor = editormd("md-content", {
          width   : "100%",
          height  : 640,
          syncScrolling : "single",
          // path    : "../static/lib/editormd/lib/"
          path    : "/lib/editormd/lib/"
        });});

      function myBack() {
        window.location.href = "/after/index";
      }
    </script>
  </body>

  <script>
    //草稿：保存
    function savaBlog(){
      $('#published').val('false');
      layui.use(['form'], function () {
        var form = layui.form;
        //自定义验证规则
        form.verify({
          title: function (value) {
            if (value.length < 1) {
              return '标题：不能为空！！！';
            }
          },
          content: function (value) {
            if (value.length < 1) {
              return '内容：不能为空！！！';
            }
          },
          description: function (value) {
            if (value.length < 1) {
              return '描述：不能为空！！！';
            }
          },
        });
      });
    }
  </script>

</html>